<template>
	<Layout :class="'bg-white p-2'">
		<Row class="m-1">
			<Col span="4" class="p-1">
			<Input class="w-100" v-model="clientName" placeholder="请输入会员姓名"/>
			</Col>
			<Col span="4" class="p-1">
			<Input class="w-100" v-model="originalCode" placeholder="请输入支付平台支付编号" />
			</Col>
			<Col span="4" class="p-1">
			<Select class="w-100" v-model="statu" clearable placeholder="请选择会员状态">
				<Option value="1">已使用</Option>
				<Option value="0">未使用</Option>
				<Option value="2">已过期</Option>
			</Select>
			</Col>
			<Col span="4" class="p-1">
			<Select class="w-100" v-model="vipTypeSel" clearable placeholder="请选择会员类别">
				<Option value="C">会员卡</Option>
				<Option value="V">会员券</Option>
			</Select>
			</Col>
			<Col span="4" class="p-1" v-if="vipTypeSel == 'C'">
			<Select class="w-100" clearable v-model="cardTypeId" clearable placeholder="请选择卡类型">
				<Option v-for="typea in cardtypes" :key="typea.cardTypeId" :value="typea.cardTypeId">{{typea.name}}</Option>
			</Select>
			</Col>
			<Col span="4" class="p-1" v-if="vipTypeSel == 'V'">
			<Select class="w-100" clearable v-model="voucherTypeId" clearable placeholder="请选择券类型">
				<Option v-for="typea in types" :key="typea.voucherTypeId" :value="typea.voucherTypeId">{{typea.name}}</Option>
			</Select>
			</Col>
		</Row>
		<Row class="m-1">
			<Col span="8" class="p-1">
			<Date-picker class="w-100" type="datetime" @on-change="stChange" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始时间">
			</Date-picker>
			</Col>
			<Col span="8" class="p-1">
			<Date-picker class="w-100" type="datetime" @on-change="etChange" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择结束时间">
			</Date-picker>
			</Col>
			<Button class="float-right mr-1 mt-1" type="primary" shape="circle"  @click="searchs" icon="ios-search">查询</Button>

		</Row>
		<Row class="m-1">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="vipType">
					<span v-if="tableInfo.data[index].vipType == 'C'">会员卡</span>
					<span v-else-if="tableInfo.data[index].vipType == 'V'">会员券</span>
				</template>
				<template slot-scope="{ row, index }" slot="recordName">
					{{row.vname}}{{row.cname}}
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.vipId)">详细</Button>
				</template>
				<template slot-scope="{ row, index }" slot="originalCode">
					<span v-if="tableInfo.data[index].originalCode == null"></span>
					<span v-else >{{tableInfo.data[index].originalCode}}</span>
				</template>
			</Table>

			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Row>
	</Layout>
</template>

<script>
	export default {
		data() {
			return {
				key: 1,
				clientName: "",
				vipType: "",
				vipTypeSel: "",
				name: "",
				st: "",
				et: "",
				statu: "",
				cname: "",
				vname: "",
				storeId: "",
				cardTypeId: "",
				voucherTypeId: "",
				originalCode:"",
				stores: [],
				types: [],
				cardtypes: [],
				tableInfo: {
					currentPage: 3,
					total: 0,
					size: 10,
					columnInfo: [{
							title: "会员编号",
							key: "vipId",
							width: 100
						},
						{
							title: "会员名称",
							key: "clientName",
							width: 100
						},
						{
							title: "会员手机号",
							key: "phone",
							width: 200
						},
						{
							title: "支付平台支付编号",
							slot: 'originalCode',
							width: 220
						},
						{
							title: "会员类别",
							slot: 'vipType',
							width: 100
						},
						{
							title: "会员开始时间",
							key: "st",
						},
						{
							title: "会员结束时间",
							key: "et",
						},
						{
							title: "会员类型",
							slot: 'recordName',
							width: 100
						},
						{
							title: "会员门店",
							key: "name",
						},
						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: []
				}

			};
		},
		methods: {
			stChange: function(e) {
				this.st = e;
			},
			etChange: function(e) {
				this.et = e;
			},
			init: function() {
				this.tableInfo.currentPage = 0;
				this.search();
			},
			show: function(vipId) {
				this.$router.push({
					name: "vip_detail",
					params: {
						vipId: vipId
					}
				});
			},
			searchs: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},
			search: function() {

				if (this.vipTypeSel == "C") {
					this.voucherTypeId = null;
				}
				if (this.vipTypeSel == "V") {
					this.cardTypeId = null;

				}
				if (this.vipTypeSel == "" || this.vipTypeSel == null) {
					this.cardTypeId = null;
					this.voucherTypeId = null;
				}

				this.http.get({
					url: "/client/vip/list",
					param: {
						current: this.tableInfo.currentPage,
						size: this.tableInfo.size,
						clientName: this.clientName,
						vipType: this.vipTypeSel,
						storeId: this.storeId,
						st: this.st,
						et: this.et,
						statu: this.statu,
						cardTypeId: this.cardTypeId,
						voucherTypeId: this.voucherTypeId,
						cname: this.cname,
						vname: this.vname,
						originalCode:this.originalCode,
					}
				}).then(data => {
					this.tableInfo.data = null;
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.search();
			},
			showVType: function() {
				return this.http.get({
					url: "/client/voucher-type/all",
				}).then(response => {
					this.types = response
				});
			},
			showCType: function() {
				return this.http.get({
					url: "/client/card-type/all",
				}).then(response => {
					this.cardtypes = response
				});
			}

		},
		created: function() {
			this.storeId = this.store.state.currentUser.store.storeId;
			this.showVType()
				.then(this.showCType)
				.then(this.init);
		},
	}
</script>

<style scoped="scoped">
</style>
